import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from '@/components/ui/tooltip';
import { Button } from '@/components/ui/button';

interface NavIconProps {
  icon: React.ReactNode,
  tooltip: string;
  active?: boolean;
  onClick?: () => void;
}

const NavIcon = (props: NavIconProps) => {
  const { icon, tooltip, onClick, active } = props;
  if (!icon || !tooltip) {
    return null;
  }

  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant='ghost' className='p-2 rounded-lg' onClick={onClick} >
          {icon}
        </Button>
      </TooltipTrigger>
      <TooltipContent side="right" sideOffset={5}>
        <p>{tooltip}</p>
      </TooltipContent>
    </Tooltip>
  )
}

export {
  NavIcon
}